<script setup>
import axios from "axios";
import {ref} from "vue";

//店铺列表
const tableData = ref([])
const shopContractList = () => {
  axios.get("/api/shop/shopContractList").then(res=>{
    if (res.data.code === 200){
      tableData.value = res.data.data;
    }else {
      alert(res.data.msg)
    }
  })
}
shopContractList()

//获取用户信息
const userInfo = ref({})
axios.get("/api/shop/userInfo").then(res=>{
  if (res.data.code === 200){
    userInfo.value = res.data.data;
  }else {
    alert(res.data.msg)
  }
})

//添加合同
const form = ref({})
const addShop = ref(false)
const toAdd = () => {
  addShop.value = ref(true)
}
const add = () => {
  axios.post("/api/shop/addContract",form.value).then(res=>{
    if (res.data.code === 200){
      alert("新增成功")
      location = "/contract"
    }else {
      alert(res.data.msg)
    }
  })
}

//图片上传
const handleAvatarSuccess = (resp) => {
  form.value.shopImg = resp.data
}

//商铺下拉框
const selectShop = ref([])
axios.get("/api/shop/selectShop").then(res=>{
  if (res.data.code === 200){
    selectShop.value = res.data.data
  }else {
    alert(res.data.msg)
  }
})

//合同审核通过
const pass = (row) => {
  axios.get("/api/shop/reviewContractPass/"+row.id).then(res=>{
    if (res.data.code === 200){
      alert("审核完成")
      location.reload()
    }else {
      alert(res.data.msg)
    }
  })
}

//合同审核驳回
const reject = (row) => {
  axios.get("/api/shop/reviewContractReject/"+row.id).then(res=>{
    if (res.data.code === 200){
      alert("审核完成")
      location.reload()
    }else {
      alert(res.data.msg)
    }
  })
}
</script>

<template>


  <el-button type="primary" @click="toAdd" v-if="userInfo.roleId != 1">添加合同</el-button>
  <el-dialog v-model="addShop">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="店铺名称">
        <el-select v-model="form.shopId" placeholder="Select" style="width: 240px">
          <el-option
              v-for="item in selectShop"
              :label="item.shopName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <h2>合同信息</h2>
      合同开始时间：<input type="date" v-model="form.startTime" style="width: 240px">
      <br><br>
      合同结束时间：<input type="date" v-model="form.endTime" style="width: 240px"><br><br>
      附件：<el-upload
        class="avatar-uploader"
        action="/api/shop/upload"
        :on-success="handleAvatarSuccess"
        list-type="picture-card"
    >
    </el-upload>
      <el-form-item>
        <el-button type="primary" @click="add">确认</el-button>
        <el-button type="primary" @click="addShop.value == false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="编号" width="120">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="店铺名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.shopName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="店铺运营类别" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.shopType }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="店铺负责人" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="合同开始时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="合同结束时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="合同状态" width="120">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px" v-if="scope.row.status == 0">待审核</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 1">审核通过</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 2">审核驳回</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="附件" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px"><el-image style="width: 100px; height: 100px" :src="scope.row.shopImg" :fit="fit" /></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="pass(scope.row)" v-if="userInfo.roleId == 1 && scope.row.status == 0">
          通过
        </el-button>
        <el-button size="small" @click="reject(scope.row)" v-if="userInfo.roleId == 1 && scope.row.status == 0">
          不通过
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>
